<template>
  <div id="app">
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header>
        <div class="header-content">
          <img src="@/assets/logo.jpg" alt="logo" class="logo">
          <el-menu class="header-navigation"
             mode="horizontal"
             :default-active="$route.path"
             text-color="#333"
             active-text-color="#ff4d4f" 
             router
             
          >
            <el-menu-item index="/Index">首页</el-menu-item>
            <el-menu-item index="/Forum">病友交流圈</el-menu-item>
            <el-menu-item index="/AI_helper">AI小医聊</el-menu-item>
            <el-menu-item index="/PersonalCenter">个人中心</el-menu-item>
          </el-menu>
          <el-autocomplete
            v-model="searchKeyword"
            :fetch-suggestions="querySearch"
            placeholder="请输入搜索内容"
            clearable
            @keyup.enter="handleSearch"
            style="width: 300px;"
          >
            <template #append>
              <el-button icon="el-icon-search" @click="handleSearch"></el-button>
            </template>
          </el-autocomplete>
        </div>
      </el-header>

      <!-- 热门话题推荐轮播图 -->
      <div class="carousel-wrapper">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
            <div class="carousel-item-wrapper" @click="handleCarouselClick(item.link)">
              <img :src="item.imageUrl" alt="热门话题" style="width: 100%; height: 100%; object-fit: cover;">
              <div class="carousel-text">{{ item.title }}</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical-demo"
            @select="handleMenuSelect"
          >
            <el-menu-item index="rare_diseases">罕见病</el-menu-item>
            <el-menu-item index="cancer">癌症</el-menu-item>
            <el-menu-item index="chronic_diseases">慢性病</el-menu-item>
            <el-menu-item index="infectious_diseases">传染病</el-menu-item>
            <el-menu-item index="mental_illnesses">精神疾病</el-menu-item>
            <el-menu-item index="autoimmune_diseases">自身免疫性疾病</el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
          <div v-if="diseaseInfo">
            <h2>{{ diseaseInfo.name }}</h2>
            <p>{{ diseaseInfo.introduction }}</p>
            <el-link :href="diseaseInfo.baiduUrl" target="_blank">查看详情</el-link>
          </div>
          <div v-if="subDiseaseCategories.length > 0">
            <h2>疾病分类</h2>
            <div v-for="(category, categoryIndex) in subDiseaseCategories" :key="categoryIndex">
              <h3>{{ category.name }}</h3>
              <div class="tag-container">
                <el-tag 
                  v-for="(disease, diseaseIndex) in category.diseases" 
                  :key="diseaseIndex" 
                  class="sub-disease-tag"
                  @click="goToDiseaseForum(disease)"
                >
                  {{ disease }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '../assets/css/Forum.css';
import { 
  carouselItems,
  hotSearchWords,
  diseaseCategories 
} from '@/assets/data/ForumData';
import router from '../router'; // 引入路由实例

export default {
  name: 'Forum',
  data() {
    return {
      activeMenu: 'rare_diseases',
      diseaseInfo: null,
      subDiseaseCategories: [],
      searchKeyword: '',
      carouselItems,        // 从外部导入
      hotSearchWords        // 从外部导入
    };
  },
  created() {
    this.handleMenuSelect('rare_diseases');
  },
  methods: {
    handleMenuSelect(key) {
      const category = diseaseCategories[key];
      if (category) {
        this.diseaseInfo = category.diseaseInfo;
        this.subDiseaseCategories = category.subDiseaseCategories;
      }
    },
    handleSearch() {
      console.log('搜索关键词：', this.searchKeyword);
    },
    querySearch(queryString, cb) {
      const results = queryString 
        ? this.hotSearchWords.filter(word => word.includes(queryString)) 
        : this.hotSearchWords;
      cb(results);
    },
    handleCarouselClick(link) {
      window.open(link, '_blank');
    },
    goToDiseaseForum(diseaseName) {
      router.push({ name: 'DiseaseForum', params: { diseaseName } });
    }
  }
};
</script>